<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>俄罗斯方块</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="header">
        <button class="back-btn-nav" onclick="window.location.href='/'">
            <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor">
                <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
            </svg>
        </button>
        <h1>俄罗斯方块</h1>
        <button id="restartBtn" class="restart-btn">重开</button>
    </div>
    
    <div class="game-wrapper">
        <div class="game-container">
            <div class="game-main">
                <div class="game-board" id="gameBoard"></div>
                <div class="game-sidebar">
                    <div class="next-piece">
                        <h3>下一个</h3>
                        <div class="next-piece-board" id="nextPieceBoard"></div>
                    </div>
                    <div class="score-panel">
                        <div class="score">得分: <span id="score">0</span></div>
                        <div class="level">等级: <span id="level">1</span></div>
                        <div class="lines">行数: <span id="lines">0</span></div>
                    </div>
                    <div class="controls">
                        <button id="startBtn">开始/暂停</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 移动端控制按钮 -->
        <div class="mobile-controls">
            <div class="mobile-row">
                <button id="rotateBtn" class="mobile-btn">↻ 旋转</button>
            </div>
            <div class="mobile-row">
                <button id="leftBtn" class="mobile-btn">← 左移</button>
                <button id="downBtn" class="mobile-btn">↓ 下移</button>
                <button id="rightBtn" class="mobile-btn">→ 右移</button>
            </div>
            <div class="mobile-row">
                <button id="dropBtn" class="mobile-btn drop-btn">⇓ 瞬降</button>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html>